<template>
  <div class="register">
    <div class="container-fluid">
      <div class="row">
        <div class="col-md-2 col-md-offset-5 col-xs-6 col-xs-offset-3">
          <img src="../../assets/logo1.png" class="text-center" style="width: 50%;margin: 25% 25% 0 25%;">
          <h3 class="text-center">注册用户</h3>
        </div>
      </div>

      <div class="row">
        <div class="col-md-6 col-md-offset-3">
          <van-form @submit="onSubmit" >
            <van-field
                v-model="username"
                name="登录账号"
                label="登录账号"
                placeholder="登录账号"
                :rules="[{ pattern:userpattern,required: true, message: '请输入2-10位无特殊字符组成的用户名' }]"
            />
            <van-field
                v-model="password"
                type="password"
                name="密码"
                label="密码"
                placeholder="密码"
                :rules="[{ pattern: passwordpattern,required: true, message: '请输入6-10位由大小写字母、数字组成的密码' }]"
            />
            <van-field
                v-model="password2"
                type="password"
                name="确认密码"
                label="确认密码"
                placeholder="再次输入密码"
                :rules="[{ validator:yzmmm,required: true, message: '两次密码输入不一样' }]"
            />
            <van-field
                v-model="username2"
                name="昵称"
                label="昵称"
                placeholder="昵称、笔名，仅用于展示"
                :rules="[{ pattern:userpattern,required: false, message: '请输入2-10位无特殊字符组成的昵称' }]"
            />
            <van-field
                v-model="lxfs"
                name="联系方式"
                label="联系方式"
                placeholder="请输入QQ，方便客服联系"
                :rules="[{ pattern:lxfspattern,required: true, message: '请填写您的QQ' }]"
            />
            <van-field
                v-model="email"
                name="邮箱"
                label="邮箱"
                placeholder="用于找回密码，请认真填写"
                :rules="[{ pattern:emailpattern,required: true, message: '请填写您的邮箱' }]"
            />
            <div style="margin: 16px;">
              <van-button :loading="regloading" loading-text="注册中..."  block round size="large" type="info" native-type="submit">注册</van-button>
            </div>
            <div style="float: right;margin-right: 30px">
              <router-link to="/login" replace><small>已有账户，前往登录</small></router-link>
            </div>
          </van-form>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import qs from 'qs';
import {userRegister} from "../../utils/api";
export default {
  name: "Register",
  data(){
    return {
      username:'',
      username2:'',
      password:'',
      password2:'',
      lxfs:'',
      msg:'',
      lxfspattern:/^[1-9][0-9]{4,10}$/,
      userpattern:/^[(a-zA-Z0-9\u4e00-\u9fa5)]{2,10}$/,
      passwordpattern:/^[0-9a-zA-Z]{6,10}$/,
      regloading:false,
      email:'',
      emailpattern:/^[_a-z0-9-]+(\.[_a-z0-9-]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,})$/,
    }
  },
  methods:{
    onSubmit(){
      this.regloading=true;
      userRegister(qs.stringify({
          username:this.username,password:this.password,lxfs:this.lxfs,username2:this.username2,openid:this.$route.query.id?this.$route.query.id:'',email:this.email})
      ).then(response=>{
        if(response.status===200){
          this.$notify({
            title: '注册成功',
            message: `恭喜你获得${response?.body}元余额`,
            type: 'success'
          });
          this.regloading=false;
          this.$router.replace("/login"); //注册完毕后直接跳转到登录页
        }else {
          this.$toast.fail({
            message: response.msg
          });
          this.regloading=false;
        }
      }).catch(error=>{
        this.regloading=false;
        console.log(error)
      })
    },
    yzmmm(){
      return this.password === this.password2;
    },
  },
  beforeRouteEnter(to, from ,next) {
    //组件间前置守卫 进入注册页前先判断用户是否已经登录 返回首页
    next(vm=>{
      if(vm.$store.state.username){
        vm.$toast.fail("请先退出登录");
        vm.$router.replace("/")
      }
    })
  }
}
</script>

<style scoped>

</style>
